<template>
  <section>
    <div class="custorm--modelbox goodstitle-edit">
      <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange" showChange="1"></renohome-right-nav>
      <!-- <upload-model
        ref="upload"
        :saveChangeEvt="uploadSaveChange"
        :uploadType="uploadConfig.type"
        :config="uploadConfig"
      ></upload-model> -->
      <section v-show="nrActive">
        <div class="edit-form-item">
          <div
            class="form-label"
            style="margin-top: 20px;"
          >魔方布局</div>
          <div class="flex-row flex-align-c">
            <magic-square
              ref="magicsquare"
              :config="magicsquareConfig"
              :changeEvt="magicsquareEvt"
            ></magic-square>
          </div>
        </div>
        <div
          v-if="custormItemData.data && custormItemData.data.length>0"
          class="es-form-item"
          style="padding: 20px 23px!important;"
        >
          <div
            v-if="(finishIndex == finishcurrent)"
            v-for="(finishItem, finishIndex) in custormItemData.data"
            :key="finishIndex"
            class="item"
            draggable="false"
            style="margin-top:20px;margin-bottom: 0;"
          >
            <div class="item-inner "><span class="labeltext">图片</span>
              <div
                typetext="图片"
                show="0"
                class="small"
                style="align-self: start;"
              >
                <div class="uploadSource solid"><i
                    class="delete ivu-icon iconfont icon-input_clear"
                    style="font-size: 16px;"
                  ></i>
                  <div
                    class="img"
                    @click="uploadtoggle(finishIndex,'image')"
                    :style="{'background-image':`url(${getPath(finishItem.data.thumb.file_path)})`,'height':'50px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}"
                  ></div>
                </div>
              </div>
            </div>
            <div class="item-inner ">
              <span class="labeltext">链接</span>
              <div
                class="readonly-div"
                @click="uploadtoggle(finishIndex,'link')"
              >
                <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                  <input
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder="请选择链接"
                    readonly="readonly"
                    class="ivu-input ivu-input-default"
                    :value="typeof finishItem.data.link === 'string' ? finishItem.data.link : (finishItem.data.link?finishItem.data.link.path:'')"
                  >
                </div> <i
                  class="icon icon-fujian readonly-icon"
                  style="left: 12px;margin-top:-3px;"
                ></i>
              </div>
            </div>
          </div>
        </div>

        <div class="edit-form-item">
          <div
            class="form-label"
            style="margin-top: 20px;"
          >图片间隙</div>
          <div class="flex-row flex-align-c">
            <el-slider
              style="width: 70%;"
              v-model="gap"
              input-size="mini"
              :max="30"
              :min="0"
            >
            </el-slider>
            <div class="coupon-showslider">{{custormItemData.style.gap}}px</div>
          </div>
        </div>
      </section>
      <section v-if="fgActive">
        <div class="edit-form-item" style="overflow: hidden;">
          <div class="es-form-item cube">
            <div class="item-inner block">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(1)"
                v-bind:class="{active:pattern==1}"
              >
                <img :src="getPath('customized.png')">
              </label>
            </div>
            <div class="item-inner">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(2)"
                v-bind:class="{active:pattern==2}"
              >
                <img :src="getPath('cube1.png')">
              </label>
            </div>
            <div class="item-inner">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(3)"
                v-bind:class="{active:pattern==3}"
              >
                <img :src="getPath('cube2.png')">
              </label>
            </div>
            <div class="item-inner">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(4)"
                v-bind:class="{active:pattern==4}"
              >
                <img :src="getPath('cube3.png')">
              </label>
            </div>
            <div class="item-inner">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(5)"
                v-bind:class="{active:pattern==5}"
              >
                <img :src="getPath('cube4.png')">
              </label>
            </div>
            <div class="item-inner">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(6)"
                v-bind:class="{active:pattern==6}"
              >
                <img :src="getPath('cube5.png')">
              </label>
            </div>
            <div class="item-inner flex-a">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(7)"
                v-bind:class="{active:pattern==7}"
              >
                <img :src="getPath('cube6.png')">
              </label>
            </div>
            <div class="item-inner">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(8)"
                v-bind:class="{active:pattern==8}"
              >
                <img :src="getPath('cube7.png')">
              </label>
            </div>
            <div class="item-inner">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(9)"
                v-bind:class="{active:pattern==9}"
              >
                <img :src="getPath('cube8.png')">
              </label>
            </div>
            <div class="item-inner">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(10)"
                v-bind:class="{active:pattern==10}"
              >
                <img :src="getPath('cube9.png')">
              </label>
            </div>
            <div class="item-inner">
              <label
                class="button-img block flex-row flex-align-c flex-justify-c"
                @click="changePattern(11)"
                v-bind:class="{active:pattern==11}"
              >
                <img :src="getPath('cube10.png')">
              </label>
            </div>
          </div>
        </div>
      </section>
      <!-- <choose-path
        ref="choosepath"
        :changeEvt="chooseUrl"
        :tabType="tabType"
      ></choose-path> -->
    </div>
  </section>
</template>

<script>
import magicSquare from '@/components/magicSquare/index'
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  data() {
    const width = 280
    const height = 280
    return {
      magicsquareConfig: {
        markerModel: 'auto',
        initList: [{
          hoverSquareList: [],
          finishSquareList: [],
          chooseSquareList: []
        }]
      },
      finishcurrent: -1,
      pattern: 1,
      initData: {
        cube1: [{
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '65px',
            'top': '0',
            'width': `${width}px`,
            'text': '280x140'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '65px',
            'top': `${height / 2}px`,
            'width': `${width}px`,
            'text': '280x140'
          }
        }
        ],
        cube2: [{
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height}px`,
            'left': '0',
            'padding-top': '135px',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height}px`,
            'left': `${width / 2}px`,
            'padding-top': '135px',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        }
        ],
        cube3: [{
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height}px`,
            'left': '0',
            'padding-top': '135px',
            'top': '0',
            'width': `${width / 3}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height}px`,
            'left': `${width / 3}px`,
            'padding-top': '135px',
            'top': '0',
            'width': `${width / 3}px`,
            'text': '140x280',
            'background-image': 'default_banner.png'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height}px`,
            'left': `${width / 1.5}px`,
            'padding-top': '135px',
            'top': '0',
            'width': `${width / 3}px`,
            'text': '140x280'
          }
        }
        ],
        cube4: [{
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '22%',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 2}px`,
            'padding-top': '22%',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280',
            'background-image': 'default_banner.png'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '22%',
            'top': `${width / 2}px`,
            'width': `${width}px`,
            'text': '140x280'
          }
        }
        ],
        cube5: [{
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '22%',
            'top': '0',
            'width': `${width}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 2}px`,
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 2}px`,
            'text': '140x280',
            'background-image': 'default_banner.png'
          }
        }
        ],
        cube6: [{
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '22%',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height}px`,
            'left': `${width / 2}px`,
            'padding-top': '135px',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280',
            'background-image': 'default_banner.png'
          }
        }
        ],
        cube7: [{
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height}px`,
            'left': '0',
            'padding-top': '135px',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280',
            'background-image': 'default_banner.png'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 2}px`,
            'padding-top': '22%',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 2}px`,
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        }
        ],
        cube8: [{
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '22%',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280',
            'background-image': 'default_banner.png'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 2}px`,
            'padding-top': '22%',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 2}px`,
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        }
        ],
        cube9: [{
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '22%',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280',
            'background-image': 'default_banner.png'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 2}px`,
            'padding-top': '22%',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': '0',
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 3}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 3}px`,
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 3}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 1.5}px`,
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 3}px`,
            'text': '140x280'
          }
        }
        ],
        cube10: [{
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height}px`,
            'left': '0',
            'padding-top': '135px',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280',
            'background-image': 'default_banner.png'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 2}px`,
            'padding-top': '22%',
            'top': '0',
            'width': `${width / 2}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width / 2}px`,
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 4}px`,
            'text': '140x280'
          }
        },
        {
          data: {
            thumb: {
              file_path: 'default_banner.png'
            }
          },
          style: {
            'box-sizing': 'border-box',
            'height': `${height / 2}px`,
            'left': `${width * 0.75}px`,
            'padding-top': '22%',
            'top': `${height / 2}px`,
            'width': `${width / 4}px`,
            'text': '140x280'
          }
        }
        ]
      }
    }
  },
  computed: {
    gap: {
      set(value) {
        this.custormItemData.style.gap = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.style.gap)
      }
    }
  },
  components: {
    magicSquare
  },
  mounted() {
    const saveMagicSquare = this.custormItemData.params.saveMagicSquare
    if (saveMagicSquare) {
      const hasKey = Object.keys(saveMagicSquare)
      if (hasKey.length > 0 && hasKey.includes('finishSquareList')) {
        this.finishcurrent = this.$refs.magicsquare.current = saveMagicSquare.finishcurrent
        this.magicsquareConfig.initList = [{
          hoverSquareList: saveMagicSquare.hoverSquareList,
          finishSquareList: saveMagicSquare.finishSquareList,
          chooseSquareList: saveMagicSquare.chooseSquareList
        }]
        // this.$refs.magicsquare.finishSquareList = saveMagicSquare.finishSquareList
        // this.$refs.magicsquare.hoverSquareList = saveMagicSquare.hoverSquareList
        // this.$refs.magicsquare.chooseSquareList = saveMagicSquare.chooseSquareList
        const display = Number(this.custormItemData.style.display)
        this.pattern = isNaN(display) ? 1 : display + 1
        console.log(this.pattern, 'this.pattern')
      }
    }
  },
  methods: {
    uploadFileCallBack(files) {
      const { key } = files
      if (key === 'ChooseLink') {
        const { currentRow: [file_path], displayData: [custorm] } = files
        if (this.imgCurrent !== -1 && file_path) {
          this.custormItemData.data[this.finishcurrent]['data']['link'] = file_path
        } else {
          if (custorm) {
            this.custormItemData.data[this.finishcurrent]['data']['link'] = custorm
          } else {
            this.$message.error('请选择链接~!')
          }
        }
      } else {
        const { displayData: [file_path] } = files
        if (this.imgCurrent !== -1 && file_path) {
          this.custormItemData.data[this.finishcurrent]['data']['thumb'] = file_path
        }
      }
    },
    uploadtoggle(index, type) {
      var data = this.custormItemData.data[index]['data']['link']
      this.output({ type, params: { editKey: this.custormItemData.key }, data })
      this.imgCurrent = index
    },
    magicsquareEvt({ hoverSquareList, finishSquareList, chooseSquareList, current }) {
      if (typeof current === 'number' && current !== -1) {
        const display = this.custormItemData.style.display === 1 ? 'auto' : String(this.custormItemData.style.display - 1)
        this.custormItemData.data = finishSquareList
        this.custormItemData.params.saveMagicSquare = {
          finishcurrent: current,
          display,
          hoverSquareList,
          finishSquareList,
          chooseSquareList
        }
        this.finishcurrent = current
      }
    },
    changePattern(e) {
      this.custormItemData.data = []
      this.$nextTick(() => {
        const finishcurrent = 0
        const finishSquareList = e === 1 ? [] : this['initData'][`cube${e - 1}`]
        const _data = e === 1 ? [] : this['initData'][`cube${e - 1}`]
        const display = e === 1 ? 'auto' : String(e - 1)
        this.pattern = e
        this.custormItemData.style.display = display
        console.log(this.custormItemData.style.display)
        this.magicsquareConfig.markerModel = display
        this.custormItemData.data = _data
        this.$refs.magicsquare.finishSquareList = finishSquareList;
        (e === 1) && (this.$refs.magicsquare.reset())
        this.finishcurrent = this.$refs.magicsquare.current = finishcurrent
        this.custormItemData.params.saveMagicSquare = {
          finishcurrent: finishcurrent,
          display: e,
          finishSquareList: this.$refs.magicsquare.finishSquareList,
          chooseSquareList: this.$refs.magicsquare.chooseSquareList,
          hoverSquareList: this.$refs.magicsquare.hoverSquareList
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.custorm--modelbox.goodstitle-edit {
  .es-form-item {
    border-bottom: 5px solid #f6f7f9;
    padding: 0 !important;
    font-size: 12px;
  }

  .es-form-item .item:nth-of-type(1) {
    margin-top: 0 !important;
  }

  .es-form-item .item-inner {
    margin-top: 8px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .es-form-item .item-inner:first-of-type {
    margin-top: 0;
  }

  .button-img {
    line-height: 0px !important;
  }

  .button-img block flex-row flex-align-c flex-justify-c {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 4px;
    line-height: 36px;
    text-align: center;
    border: 1px solid transparent;
  }

  .button-img block flex-row flex-align-c flex-justify-c.block {
    width: 100%;
    position: relative;
    min-height: 32px;
    height: auto;
    padding: 10px;
    text-align: left;
  }

  .opacity-0 {
    opacity: 0;
  }

  .button-img block flex-row flex-align-c flex-justify-c .opacity-0 {
    width: 0;
    height: 0;
    position: absolute;
  }

  .es-form-item .button-img {
    padding: 10px;
  }

  // 风格开始
  .es-form-item.cube {
    float: left;
  }

  .es-form-item.cube .item-inner {
    width: 50%;
    float: left;
  }

  .es-form-item.cube .item-inner.block {
    width: 100%;
  }

  .es-form-item.cube
    .item-inner
    .button-img
    block
    flex-row
    flex-align-c
    flex-justify-c
    img {
    max-height: 100%;
    max-width: 100%;
  }
}
</style>
